<template>
  <div class="app" v-if='user'>
    <el-container style="height:100%">
        <el-header style="height: 55px;line-height: 55px;">
            <a href="#" class="logo">
                <img src="../../assets/img/logo.png">
                <img src="../../assets/img/logo_text.png">
            </a>
            <ul class="header-ul">
                <li><a href="#" @click='newMessage()'><img src="../../assets/img/alarm.png"><span class="badge">15</span></a></li>
                <li @click='onLogout' v-if='user.xb==="男"'><a href="#"><img src="../../assets/img/head_portrait_boy.png" style="height: 28px;">{{user.xm}}</a></li>
                <li @click='onLogout' v-if='user.xb==="女"'><a href="#"><img src="../../assets/img/head_portrait_gril.png" style="height: 28px;">{{user.xm}}</a></li>
                <!-- <li><a href="#"><img src="../../assets/img/switch.png">门店切换</a></li> -->
                <el-dropdown  v-if="menuNameIndex=='餐饮管理'">
                    <el-button type="primary" style="background-color: transparent;border: none;">
                        <img src="../../assets/img/switch.png">  <span>{{currentShopName}}</span>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" v-if="shopList">
                    <el-dropdown-item @click.native='onGetList(shop.id,shop.name)' v-for="shop in shopList" :key='shop.name'>{{shop.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown  v-if="menuNameIndex=='会务团餐'">
                    <el-button type="primary" style="background-color: transparent;border: none;">
                        <img src="../../assets/img/switch.png">  <span>{{currentHwName}}</span>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" v-if="hwList">
                    <el-dropdown-item @click.native='onGetHwList(hwshop.id,hwshop.name)' v-for="hwshop in hwList" :key='hwshop.name'>{{hwshop.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

                <el-dropdown  v-if="menuNameIndex=='宾馆预订'">
                    <el-button type="primary" style="background-color: transparent;border: none;" >
                        <img src="../../assets/img/switch.png"> <span>{{currentHotelName}}</span>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" v-if="hotelList">
                    <el-dropdown-item @click.native='onGetHotelList(hotel.id,hotel.name) ' v-for="hotel in hotelList" :key='hotel.name' >{{hotel.name}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

            </ul>
        </el-header>
        <el-container>
            <el-aside style="width: 130px;">
                <ul class="menu">
                    <li v-for='(name,index) in menuName' :key="name" @click='changeType(index,name)' :class='{true:"active"}[menuNameIndex===name]'><a href="javascript:void(0);">{{name}}</a></li>
                </ul>
            </el-aside>
            <el-main>
                <Cygl v-if="menuNameIndex=='餐饮管理'" ref='onGetList' :currentTreenode='currentTreenode'></Cygl>
                <Hwtc v-if="menuNameIndex=='会务团餐'"  ref="onGetHwList" :currentHwTreenode='currentHwTreenode' ></Hwtc>
                <Bgyd v-if="menuNameIndex=='宾馆预订'" ref='onGetHotelList' :currentHotelTreenode='currentHotelTreenode'></Bgyd>
                <Clyd v-if="menuNameIndex=='车辆预订'"></Clyd>
                <Csfw v-if="menuNameIndex=='超市服务'"  ref="onGetMarketlList" :currentMarketTreenode='currentMarketTreenode' ></Csfw>
            </el-main>
        </el-container>
    </el-container>
    <tipModel v-on:showTipModel='newMessage($event)' :class="{true:'tipModelActive'}[showTipModel]" :xydcMsgList='xydcMsgList' :bgydMsgList='bgydMsgList' :hwtcMsgList='hwtcMsgList'></tipModel>
  </div>
</template>


<script>
import Bgyd from '../bgyd/template.vue';
import Cygl from '../cygl/template.vue';
import Hwtc from '../hwtc/template.vue';
import Xfjl from '../xfjl/template.vue';
import Csfw from '../csfw/template.vue';
import Clyd from '../clyd/template.vue';

import tipModel from '../../components/tip-model/tip-model.vue';
import { mapGetters, mapActions } from 'vuex';
import axios from 'axios'
import {
  setLocalStorage,
  isQuotaExceeded,
  getLocalStorage
} from "../../helpers/locTime";


export default {
  name: 'index',
  components: {
	  Bgyd,
      Cygl,
      Hwtc,
      Xfjl,
      Csfw,
      Clyd,
      tipModel
  },
  data(){
	return{
		menuName:[],
        menuIndex:0,
        menuNameIndex:'',
        showTipModel:false,
        shopList:[],
        hotelList:[],
        marketList:[],
        clydList:[],
        hwList:[],
        shopNum:0,
        hotelNum:0,
        marketNum:0,
        carNum:0,
        hwNum:0,
        currentTreenode:null,
        currentHwTreenode:null,
        currentHotelTreenode:null,
        currentMarketTreenode:null,
        currentHotelName:'御苑宾馆',
        currentShopName:'翠屏苑港式餐厅',
        currentHwName:'明故宫校区美食园',
        shopAuthList:[
            {'name':'翠屏苑港式餐厅','id':2,'auth':'cpyct:2'},
            {'name':'桃李苑餐厅','id':6,'auth':'tlyct:6'},
            {'name':'御苑宾馆餐厅','id':7,'auth':'yyct:7'},
        ],//餐厅权限列表
         hwtcAuthList:[
            {'name':'明故宫校区美食园','id':26,'auth':'mggmsy:26'},
            {'name':'将军路东区和园三楼大厅','id':28,'auth':'jjldqhysldt:28'},
            {'name':'将军路东区和园三楼户外露台','id':29,'auth':'jjldqhyslhwlt:29'},
            {'name':'将军路东区西小厅','id':65,'auth':'jjldqxxt:65'},
            {'name':'将军路东区大厅','id':66,'auth':'jjldqdt:66'},
            {'name':'将军路东区室外露台','id':67,'auth':'jjldqswlt:67'},
            {'name':'将军路西区学子缘运动餐厅','id':27,'auth':'jjlxqxzyydct:27'},
        ],//会务团餐
        hotelAuthList:[
            {'name':'御苑宾馆','id':19,'auth':'yy:19'},
            {'name':'明御楼宾馆','id':20,'auth':'myl:20'},
            {'name':'御苑宾馆','id':1,'auth':'yybg:1'},
            {'name':'明御楼宾馆','id':2,'auth':'mylbg:2'},
        ],//正式服务器宾馆权限列表
        marketAuthList:[
            {'name':'教育超市','id':1,'auth':'jycs:1'},
        ],
        clydAuthList:[
            {'name':'车辆预订','id':null,'auth':'clht:show'},
        ],
       
        websocket: null,
        userinfo:null,
        messageUrl:require('../../assets/sound/message.mp3'),
        xydcMsgList:['xx包厢已被预订'],
        bgydMsgList:[],
        hwtcMsgList:['欢迎进入会务团餐'],
	}
  },
  created(){
    this.onCheckLogin()
    this.initWebSocket(this.user)
  },
  methods:{
        ...mapActions([
            'getGrxx',
            'checkLogin',
            'logout',
            'getPermissions'
        ]),
     
        onCheckLogin(){
            if(!this.isLogin){
                this.$router.push({path: this.$route.query.redirect || '/'})
            }else{
                this.checkPermissions()
            }
        },//判断登录状态
        
        toggle(){

        },
        checkPermissions(){
            // this.hotelAuthList.forEach(item=>{
            //     this.getPermissions(item.auth).then(res=>{
            //         if(res){
            //             this.hotelList.push(item)
            //             this.setMenuNameHotel()
            //         }
            //     })//查询宾馆权限
            // })

            // this.shopAuthList.forEach(item=>{
            //     //mapActions中获取权限
            //     this.getPermissions(item.auth).then(res=>{
            //         if(res){
            //             this.shopList.push(item)
            //             this.setMenuNameShop()
            //         }
            //     })//查询餐厅权限
            // })
            this.setPermissions(this.hotelAuthList,this.hotelList)
            this.setPermissions(this.shopAuthList,this.shopList)
            this.setPermissions(this.hwtcAuthList,this.hwList)
            this.setPermissions(this.marketAuthList,this.marketList)
            this.setPermissions(this.clydAuthList,this.clydList)
        },

        setPermissions(authList,list){
            authList.forEach(item=>{
                //mapActions中获取权限
                this.getPermissions(item.auth).then(res=>{
                    if(res){
                        list.push(item)
                        this.setMenuNameHotel()
                        this.setMenuNameShop()
                        this.setMenuNameHWShop()
                        this.setMenuNameMarket()
                        this.setMenuNameCar()
                    }
                })//查询餐厅权限
            })
        },//设置权限方法,第一个参数为权限list,第二个参数为存入权限list
        setMenuNameHotel(){
            this.hotelNum++
            if(this.hotelNum == 1){
                this.menuName.push('宾馆预订') //配置宾馆预订是否显示
                setTimeout(()=>{
                    this.currentHotelTreenode = this.hotelList[0].id //默认treenode
                },300)
            }
            if(this.menuNameIndex==''){
                this.menuNameIndex = '宾馆预订' //配置登录后载入界面
            }
        },

        setMenuNameShop(){
            this.shopNum++
            if(this.shopNum == 1){
                this.menuName.push('餐饮管理') //配置餐饮管理是否显示
                setTimeout(()=>{
                    this.currentTreenode = this.shopList[0].id //默认treenode
                },300)
            }
            if(this.menuNameIndex==''){
                console.log('餐饮管理',this.menuName[0])
                this.menuNameIndex = '餐饮管理' //配置登录后载入界面
            }
        },
        setMenuNameHWShop(){
            this.hwNum++
            if(this.hwNum == 1){
                this.menuName.push('会务团餐') //配置会务团餐是否显示
                setTimeout(()=>{
                    this.currentHwTreenode = this.hwList[0].id //默认treenode
                },300)
            }
            if(this.menuNameIndex==''){
                console.log('会务团餐',this.menuName[0])
                this.menuNameIndex = '会务团餐' //配置登录后载入界面
            }
        },
        setMenuNameMarket(){
            this.marketNum++
            if(this.marketNum == 1){
                this.menuName.push('超市服务') //配置超市是否显示
                setTimeout(()=>{
                    this.currentMarketTreenode = this.marketList[0].id //默认treenode
                },300)
            }
            if(this.menuNameIndex==''){
                console.log('超市服务',this.menuName[0])
                this.menuNameIndex = '超市服务' //配置登录后载入界面
            }
        },
        setMenuNameCar(){
            this.carNum++
            if(this.marketNum == 1){
                this.menuName.push('车辆预订') //配置车辆是否显示
            }
            if(this.menuNameIndex==''){
                console.log('车辆预订',this.menuName[0])
                this.menuNameIndex = '车辆预订' //配置登录后载入界面
            }
        },
        changeType(index,name){
            this.menuIndex = index
            this.menuNameIndex = name
        },

        newMessage(){
            if(this.showTipModel){this.showTipModel = false}else{
                this.showTipModel = true
                // console.log(this.showTipModel)
            }
        },//消息提示

        onLogout(){
            this.logout()
            this.$message({message: '注销成功!',type: 'success'});
            this.$router.push({path: this.$route.query.redirect || '/'})
        },//注销

        onGetList(treeNode,shopName) {
            this.currentTreenode = treeNode
            this.$refs.onGetList.onGetList(this.currentTreenode)
              this.currentShopName = shopName
        },//默认载入餐厅
         onGetHwList(treeNode,hwName) {
            this.currentHwTreenode = treeNode
            this.$refs.onGetHwList.onGetHwList(this.currentHwTreenode)
            this.currentHwName = hwName
        },//默认载入会务团餐
        onGetHotelList(treeNode,hotelName){
            this.currentHotelTreenode = treeNode
            console.log('当前',treeNode , this.currentHotelTreenode,hotelName)
            this.$refs.onGetHotelList.getHotelList2(this.currentHotelTreenode)
            this.currentHotelName = hotelName
        },//默认载入宾馆
        
        onGetMarketlList(treeNode){
            console.log('当前',this.currentMarketTreenode)
            this.currentMarketTreenode = treeNode
            this.$refs.onGetMarketlList.onGetList(this.currentMarketTreenode)
        },//默认载入超市


        onConfirm () {
   		 //需要传输的数据
            let data = {
            code: 1,
            item: 'aaaa'
            }
            this.websocketsend(JSON.stringify(data))
        },
        initWebSocket (user) { // 初始化websocket
            let username = user.xm
            console.log(username)
            this.websock1 = new WebSocket('ws://' + axios.defaults.baseURL.replace('http://','') +'xydc/' +'webSocket/' + username )
            this.websock2 = new WebSocket('ws://' + axios.defaults.baseURL.replace('http://','') +'bgyd/' +'webSocket/' + username )
            // this.websock3 = new WebSocket('ws://' + axios.defaults.baseURL.replace('http://','') +'hwtc/' +'webSocket/' + username )
            //this.websock2 = new WebSocket('ws://nhhq.nuaa.edu.cn/xydc/base/webSocket/admin')
            this.websock1.onmessage = this.websocketonmessage
            this.websock1.onerror = this.websocketonerror
            this.websock1.onopen = this.websocketonopen
            this.websock1.onclose = this.websocketclose

            this.websock2.onmessage = this.websocketonmessage
            this.websock2.onerror = this.websocketonerror
            this.websock2.onopen = this.websocketonopen
            this.websock2.onclose = this.websocketclose

            // this.websock3.onmessage = this.websocketonmessage
            // this.websock3.onerror = this.websocketonerror
            // this.websock3.onopen = this.websocketonopen
            // this.websock3.onclose = this.websocketclose
        },
        websocketonopen () { // 连接建立之后执行send方法发送数据
            console.log('WebSocket connect success...')
            //this.websocketsend(JSON.stringify(data))
        },
        websocketonerror () { 
             console.log( 'WebSocket connect failed...')
        },
        websocketonmessage (e) { // 数据接收
            this.newMessage()
            const message = new Audio(this.messageUrl)
            message.play()//播放提示音
            setTimeout(res=>{
                this.newMessage()
            },10000)//三秒关闭弹窗
            console.log('new msg...' + e.data)
            let msg = e.data
            if(msg.search('xydc')==0){
                this.xydcMsgList.unshift(msg.replace('xydc:',''))
            }else if(msg.search('hwtc')==0){    
                 this.hwtcMsgList.unshift(msg.replace('hwtc:',''))
            }else{
                this.bgydMsgList.unshift(msg.replace('bgyd:',''))
            }
        },
        websocketsend (Data) { // 数据发送
            this.websock.send(Data)
        },
        websocketclose (e) {  // 关闭
            console.log('close connect...', e)
            // setInterval(res=>{
            //     this.initWebSocket(this.user)
            // },50000)
            
        },
        destroyed () {
            this.websock.close() // 离开路由之后断开websocket连接
        }
  },
  computed:{
      ...mapGetters([
          'isLogin',
          'user',
      ]),
      
  }
}
</script>

<style lang="less">
@import "../../assets/common.less";
.app{
    height: 100%;
    position: relative;
    overflow: hidden;
}
.el-main {
    padding: 0;
}
body > .el-container {
    margin-bottom: 40px;
}
.tipModelActive{
    top: 753px!important;
    left: 20px!important;
    transition: all .5s;
}
.el-dropdown {
    vertical-align: top;
}
.el-dropdown + .el-dropdown {
    margin-left: 15px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
</style>
